<template>
  <div class="home">
    <el-backtop target=".home .my-home" :bottom="100">
        <div
          style="{
            height: 100%;
            width: 100%;
            background-color: #f2f5f6;
            box-shadow: 0 0 6px rgba(0,0,0, .12);
            text-align: center;
            line-height: 40px;
            color: #1989fa;
            z-index: 100;
          }"
        >
          UP
          <div style="margin-bottom: 10000px;"></div>
        </div>
    </el-backtop>
    <div class="top">
        <el-carousel height="100vh" direction="vertical" :autoplay="true" :interval="4000">
          <el-carousel-item v-for="item in 3" :key="item">
          </el-carousel-item>
        </el-carousel>
        <div class="top-home">
          <div class="my-home" ref="home"><h2>MYCHIAK</h2><img src="../assets/touxiang.jpg"/>
          <p>陈浩略，来自90后湛江市，2018年毕业于罗职院的计算机应用专业</p>
          <h5>往下了解我<i class="el-icon-arrow-down"></i></h5>
          <h6> <router-link to="/introduce">简历</router-link><router-link to="/liuyan">留言</router-link><router-link to="/share">文章</router-link></h6></div>
        </div>
    </div>
    <mycontent></mycontent>
  </div>
</template>

<script>
import mycontent from './body.vue'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    mycontent
  },
  methods: {
  },
  mounted () {
    // this.$refs.home.onmousemove = function(e) {
    //        console.log('鼠标位置X' + e.clientX)
    //        console.log('鼠标位置Y' + e.clientY)
    //    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top{
    width: 100%;
    height: 100vh;
    position: relative;
  }
  .top-home:hover .my-home{
    box-shadow: 0 0 70px silver;
/*    transform: scale(1.03) translate(3.62084px, 7.4233px) rotateX(7.4233deg) rotateY(3.62084deg) rotateZ(30deg); */
  }
  .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }
    .el-carousel__item:nth-child(1) {
      background: url(../assets/bg2.jpg) no-repeat top center;
      background-size: cover;
      opacity: 0.5;
    }
    .el-carousel__item:nth-child(2) {
      background: url(../assets/bg1.jpg) no-repeat top center;
      background-size: cover;
      opacity: 0.5;
    }
    .el-carousel__item:nth-child(3) {
      background: url(../assets/bg3.jpg) no-repeat top center;
      background-size: cover;
      opacity: 0.5;
    }
    .top-home{
      width: 100%;
      height: 100vh;
      position: absolute;
      z-index: 999;
      overflow: hidden;
    }
    .el-carousel{
      position: absolute;
      width: 100%;
    }
    .my-home{
      width: 500px;
      height: 500px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -250px;
      margin-left: -250px;
      text-align: center;
      animation: myfirst 1s;
      -webkit-animation: myfirst 1s;
      transition: all 0.3s;
      -webkit-transition: all 0.3s;
      border-radius: 10px;
    }
    .my-home h2{
      font-size: 40px;
      margin-bottom: 0px;
      text-shadow: 2px 2px 2px #00aa7f;
      transition: all 0.5s;
      cursor: pointer;
    }
    .my-home h5{
      font-size: 18px;
      color: coral;
    }
    .my-home h6 a{
      margin: 0 5px;
      color: #3a8ee6;
      font-size: 15px;
      text-decoration: none;
      transition: all 0.5s;
    }
    .my-home h6 a:hover{
      color: #ffaa00;
      font-size: 18px;
    }
    .my-home h2:hover{
      transform: translateY(-5px);
      text-shadow: 5px 5px 5px #ff5500;
    }
    .my-home p{
      font-weight: bold;
    }
    .my-home img{
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }
    @media (max-width:767px){
      .my-home{
        width: 100%;
        height: 500px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -250px;
        margin-left: -50%;
        text-align: center;
        animation: myfirst 1s;
        -webkit-animation: myfirst 1s;
      }
    }
    @keyframes myfirst{
      from{
        transform: translateY(2em);
        -webkit-transform: translateY(2em);
        opacity: 0;
      }
      to{
        transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
      }
    }
    @-webkit-keyframes myfirst{
      from{
        transform: translateY(2em);
        -webkit-transform: translateY(2em);
        opacity: 0;
      }
      to{
        transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
      }
    }
    @keyframes yingyin{
      from{
        transform: translateY(2em);
        -webkit-transform: translateY(2em);
        opacity: 0;
      }
      to{
        transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
      }
    }
    @-webkit-keyframes yingyin{
      from{
        transform: translateY(2em);
        -webkit-transform: translateY(2em);
        opacity: 0;
      }
      to{
        transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
      }
    }
</style>
